<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号: <input type="text" v-model.trim="account"> <br><br>
            密码: <input type="password" v-model="password"> <br><br>
            年龄: <input type="number" v-model.number="age"><br><br>
            性别:
            男 <input type="radio" name="sex" v-model="sex" value="mail">
            女 <input type="radio" name="sex" v-model="sex" value="femail"> <br><br>
            爱好:
            学习 <input type="checkbox" v-model="hobby" value="study">
            打游戏 <input type="checkbox" v-model="hobby" value="game">
            吃饭 <input type="checkbox" v-model="hobby" value="eat"> <br><br>
            所属校区
            <select v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br><br>
            其它信息:
            <textarea v-model.lazy="other">

            </textarea>
            <br><br>
            <input type="checkbox" v-model="agree"> 阅读并接受 <a href="www.baidu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

</body>

</html>
<script>
    new Vue({
        el: '#root',
        data: {
            account: '',
            password: '',
            sex: 'femail',
            hobby: [],
            city: 'beijing',
            other: '',
            agree: '',
            age: 18
        },
        methods: {
            demo() {
                console.log(JSON.stringify(this._data));
            }
        }
    })
</script>

<!-- 
    收集表单数据: 
        若: <input type='text'/>, 则v-model收集的是value值, 用户输入的就是value值
        若: <input type='radio'/>, 则v-model收集的是value值, 且要给标签配置value值
        若: <input type='checkbox'/>
            1. 没有配置input的value属性, 那么收集的是checked(勾选or没勾选, 是布尔值)
            2. 配置input的value值
                a. v-model的初始值是非数组, 那么收集的就是checked(勾选or未勾选, 是布尔值)
                b. v-model的初始值是数组, 那么收集的就是value组成的数组
        备注: v-model的三个修饰符:
            lazy: 失去焦点再收集数据
            number: 输入字段串转化为有效的数字
            trim: 输入收尾空格过滤

 -->